<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>权限管理</el-breadcrumb-item>
            <el-breadcrumb-item>权限列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-input placeholder="请输权限名称" clearable v-model="name" @clear="searchPermission">
                        <el-button slot="append" icon="el-icon-search" @click="searchPermission"></el-button>
                    </el-input>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="addPerFormVisible = true">添加权限</el-button>
                </el-col>
            </el-row>
            <el-table :data="permissionList" border stripe>
                <el-table-column type="index"></el-table-column>
                <el-table-column label="权限名称" prop="name"></el-table-column>
                <el-table-column label="权限路径" prop="url"></el-table-column>
                <el-table-column label="权限类型">
                    <template slot-scope="sc">{{sc.row.urlType==1?'菜单权限':'接口权限'}}</template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="warning" size="mini" @click="showEditDialog(scope.row)">修改</el-button>
                        <el-button type="danger" size="mini" @click="removePermissionById(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[7, 14 , 20, total]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
            ></el-pagination>
        </el-card>

      <!-- 编辑-->
      <div>
        <el-dialog title="修改权限" :visible.sync="editPerFormVisible" size="mini">
          <el-form :model="editForm"  ref="editForm">
            <el-form-item label="权限名称" label-width="120px" prop="name">
              <el-input v-model="editForm.name"></el-input>
            </el-form-item>
            <el-form-item label="url地址" label-width="120px" prop="url">
              <el-input v-model="editForm.url"></el-input>
            </el-form-item>
            <el-form-item label="权限类型" label-width="120px" prop="urlType">
              <el-select v-model="editForm.urlType" placeholder="请选择权限类型">
                <el-option label="菜单权限" value="1"></el-option>
                <el-option label="接口权限" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="请选择父菜单" label-width="120px" prop="parentId" >
              <el-select v-model="editForm.parentId" placeholder="请选择父菜单" disabled>
                <el-option v-for="m in parentMenuList" :label="m.name" :value="m.id"></el-option>
              </el-select>
            </el-form-item>

          </el-form>

          <div slot="footer" class="dialog-footer">
            <el-button @click="resetForm('editForm')">重置</el-button>
            <el-button type="primary" @click="submitForm">确定</el-button>

          </div>
        </el-dialog>
      </div>
      <!--添加-->
      <div>
        <el-dialog title="添加权限" :visible.sync="addPerFormVisible">
          <el-form :model="addForm"  ref="addForm">
            <el-form-item label="权限名称" label-width="120px" prop="name">
              <el-input v-model="addForm.name"></el-input>
            </el-form-item>
            <el-form-item label="url地址" label-width="120px" prop="url">
              <el-input v-model="addForm.url"></el-input>
            </el-form-item>
            <el-form-item label="权限类型" label-width="120px" prop="urlType">
              <el-select v-model="addForm.urlType" placeholder="请选择权限类型">
                <el-option label="菜单权限" value="1"></el-option>
                <el-option label="接口权限" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="请选择父菜单" label-width="120px" prop="parentId" >
              <el-select v-model="addForm.parentId" placeholder="请选择父菜单" >
                <el-option v-for="m in parentMenuList" :label="m.name" :value="m.id"></el-option>
              </el-select>
            </el-form-item>

          </el-form>

          <div slot="footer" class="dialog-footer">
            <el-button @click="addPerFormVisible = false">取消</el-button>
            <el-button type="primary" @click="addPer">保存</el-button>

          </div>
        </el-dialog>
      </div>
    </div>
</template>
<script>
    export default {
        inject:['reload'],
        data() {
            return {
                editPerFormVisible:false,
                addPerFormVisible: false,
                parentMenuList: [],
                pageNum: 1,
                pageSize: 7,
                permissionList: [],
                total: 0,
                name: "", //权限名称
                urlTypeDesc: "菜单权限",
                editForm: {
                  name: '',
                  url: '',
                  urlType: '',
                  parentId: ''
                },
                addForm: {
                  name: '',
                  url: '',
                  urlType: '',
                  parentId: ''
                },
            };
        },
        methods: {
          //添加数据
          addPer(){
            let url=this.$baseUrl.baseUrl+"permission/add";
            this.$axios.post(url,{
              name:this.addForm.name,
              url:this.addForm.url,
              urlType:this.addForm.urlType,
              parentId:this.addForm.parentId
            }).then((res)=>{
              if(res.data.code==200){
                alert(res.data.msg);
                this.reloadData();
                this.addPerFormVisible=false;
                this.$refs['addForm'].resetFields();
              }else{
                alert(res.data.msg);
              }
            })
          },
          //重置按钮
          resetForm(){
            this.$refs.editForm.resetFields();
          },
          //修改数据
          submitForm(){
            let url=this.$baseUrl.baseUrl+"permission/modify";
            this.$axios.post(url,{
              id:this.editForm.id,
              name:this.editForm.name,
              url:this.editForm.url,
              urlType:this.editForm.urlType,
              parentId:this.editForm.parentId
            }).then((res)=>{
              if(res.data.code==200){
                alert(res.data.msg);
                this.reloadData();
                this.editPerFormVisible=false;
                location.reload();
              }else{
                alert(res.data.msg);
              }
            })
          },
            //每页显示多少条数据
            handleSizeChange(size){
              this.pageSize = size;
              this.pageNum = 1;
              this.reloadData();
            },
            //跳页
            handleCurrentChange(now){
              this.pageNum = now;
              this.reloadData();
            },
            //根据名称查询权限
            searchPermission(){
              this.pageNum = 1;
              this.reloadData();
            },
            //打开编辑框
            showEditDialog(obj){
              this.editPerFormVisible = true;
              this.editForm = obj;
            },
            //根据ID删除
            removePermissionById(id){
              if(confirm("确认要删除吗？")) {
                let url = this.$baseUrl.baseUrl + "permission/del/" + id;
                this.$axios.delete(url).then((res) => {
                  if (res.data.code == 200) {
                    alert(res.data.msg);
                    this.reloadData();
                  } else {
                    alert(res.data.msg);
                  }
                })
              }
            },
            //初始化主菜单
            reloadData(){
              let url = this.$baseUrl.baseUrl + "permission/list";
              this.$axios.get(url, {
                params: {
                  name: this.name,
                  now: this.pageNum,
                  size: this.pageSize
                }
              }).then((res) => {
                this.permissionList = res.data.data.list;
                this.pageNum = res.data.data.pageNum;
                this.pageSize = res.data.data.pageSize;
                this.total = res.data.data.total;
              })
            },
          // 初始化父菜单
            initParentMenu() {
            let url=this.$baseUrl.baseUrl+"permission/initParentMenu";
            this.$axios.get(url).then(res=>{
              if(res.data.code==200){
                console.log(res.data.data);
                this.parentMenuList=res.data.data;
              }else{
                this.$message.error("查询失败")
              }
            })
          },
        },
        created() {
            this.reloadData();
            this.initParentMenu();
        }
    };
</script>
<style lang="less" scoped>
</style>